<template>
<h2>权益新增</h2>
<table class="table table-bordered">
    <tr>
        <td>权益名称</td>
        <td>
            <input type="text" v-model="info.qname"/>
        </td>
    </tr>
    <tr>
        <td>图标</td>
        <td>
            <img :src="info.image" style="width: 70px;height: 70px;"/>
            <input type="file" @change="upload"/>
        </td>
    </tr>
    <tr>
        <td>状态</td>
        <td>
            <input type="radio" :value="true" v-model="info.state"/>可用
            <input type="radio" :value="false" v-model="info.state"/>不可用
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="button" value="添加" class="btn btn-info" @click="Add" />
        </td>
    </tr>
</table>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router';
const router=useRouter()


const info=ref({
    qname:'',
    image:'',
    state:true
})

//上传图片
const file=ref('')
const upload=(e:any)=>{
    file.value=e.target.files[0]
    if(!file.value){
        alert('请选择图片')
        return
    }
    const formdata=new FormData()
    formdata.append('file',file.value)
    axios.post('https://localhost:7279/api/File/UpLoad',formdata)
    .then(res=>{
        if(res.data.code==1){
            alert(res.data.message)
        }
        else if(res.data.code==2){
            alert(res.data.message)
        }
        else if(res.data.code==3){
            alert(res.data.message)
            info.value.image=res.data.path
        }
        else{
            alert('上传失败')
        }
    })
    .catch(err=>{
        console.log(err)
    })
}

const Add=()=>{
    var obj={
        qname:info.value.qname,
        image:info.value.image,
        state:info.value.state
    }
    axios.post('https://localhost:7279/api/Quanyi/QuanyiAdd',obj)
    .then(res=>{
        if(res.data==-1){
            alert('权益名称不能重复')
        }
        else if(res.data>0){
            alert('添加成功')
            router.push('/QuanyiShow')
        }
        else{
            alert('添加失败')
        }
    })
}

</script>